<template>
  <div class="_components_video-material">
    <vxe-table
      ref="listTree"
      border
      resizable
      highlight-hover-row
      :loading="loading"
      :data="list"
      width
      :auto-resize="true"
      max-height="500"
      highlight-current-row
      text-algin="center"
    >
      <vxe-table-column width="50" type="seq" title=" " />
      <vxe-table-column width="150" field="id" title="同步公众号">
        <template slot-scope="scope">
          {{ scope.row.asyncStatus === 0 ? "未同步" : "已同步" }}
        </template>
      </vxe-table-column>
      <vxe-table-column field="name" min-width="200" title="名称" />
      <vxe-table-column width="200" field="createTime" title="更新时间" />
      <vxe-table-column
        title="操作"
        fixed="right"
        align="center"
        width="130"
        slots="default"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.asyncStatus === 0"
            type="text"
            size="mini"
            @click="uploadMediaSource(scope.row.id)"
          >同步</el-button>
          <el-dropdown style="margin: 0 0 0 10px" placement="bottom-start">
            <el-button
              type="text"
              size="mini"
            >删除</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :disabled="scope.row.asyncStatus === 0"
                @click.native="del(scope.row.id, 0)"
              >删除公众号</el-dropdown-item>
              <el-dropdown-item
                @click.native="del(scope.row.id, 1)"
              >删除全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  props: {
    propsList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      list: [],
      loading: false
    }
  },
  created() {
    this.list = this.propsList
  },
  methods: {
    uploadMediaSource(id) {
      this.$emit('uploadMediaSource', id)
    },
    del(id, type) {
      this.$emit('del', id, type)
    }
  }
}
</script>

<style>
._components_video-material {
}
</style>
